<template>
  <div class="home">
    <my-input v-model="title" placeholder="请输入内容" @add="adds">
      <h1>TODOLIST</h1>
      <!-- 插槽 -->
    </my-input>

    <!-- <h1>{{ title }}</h1> -->

    <my-list :status="false" :num="undoneNum">
      <h2>正在进行</h2>
    </my-list>
    <my-list :status="true" :num="doneNum">
      <h2>已经完成</h2>
    </my-list>
    <my-list status="all" :num="$store.state.list.length">
      <h2>全部任务</h2>
    </my-list>
    <!-- 这里又很多写法 可以 像这样传状态在子组件里 用v-show进行筛选   -->
    <!-- 还有别的写法 就是可以在父组件这里 用计算属性算出未完成的 和 已完成的 数据 分别把数据通过父传子传给子组件 -->
  </div>
</template>

<script>
// @ is an alias to /src
import myInput from "../components/myInput.vue";
import myList from "../components/myList.vue";
import { mapMutations, mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      title: "",
    };
  },
  components: {
    myInput,
    myList,
  },
  methods: {
    adds() {
      console.log("父组件的add");
      // this.$store.commit("add", {
      //   title: this.title,
      //   status: false,
      //   id: new Date().getTime(),
      //   //时间戳是唯一的可以作为id来用
      // });
      // 添加方法写在父组件 第一点是因为title在父组件 还有就是为了子组件的复用性 项目中可能有的地方是添加 有的地方是搜索 所以不能写死在子组件中
      // 这里要调用vuex进行添加 因为操作的是vuex里的数据

      this.add({
        title: this.title,
        status: false,
        id: new Date().getTime(),
      });
      //调用辅助函数展开的add方法 可以传参 并且执行完之后别的代码 1222
      this.title = "";
    },
    ...mapMutations(["add"]),
    ...mapActions(["getList"]),
    //展开后的mutation和action都作为普通方法使用了
  },
  created() {
    // this.$store.dispatch("getList");
    //调用action方法在vuex中请求初始的list数据

    this.getList();
  },
  computed: {
    ...mapGetters(["undoneNum", "doneNum"]),
    //用辅助函数 mapGetters展开 getters 就可以作为计算属性直接用了
  },
};
</script>
